<template>
  <div class="hemaPoup">
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" round>
      <van-nav-bar title="信息填写" @click-left="close" @click-right="confirm">
        <template #right>
          <div>确定</div>
        </template>
        <template #left>
          <div>取消</div>
        </template>
      </van-nav-bar>
      <van-cell required label-class="cell_l">
        <template slot="title">
          <div class="c_l">上传开票图片</div>
        </template>
        <template slot="label">
          <van-uploader :after-read="e => afterRead(e)">
            <div class="uplpadBox">
              <i class="iconfont icon-icon_add" v-if="!pic"></i>
              <div class="uplpadBox_img" v-if="pic">
                <img :src="pic" alt="" />
              </div>
            </div>
          </van-uploader>
        </template>
      </van-cell>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      pic: "",
      relative_path: ""
    };
  },
  methods: {
    close() {
      this.show = false;
    },
    confirm() {
      this.$emit("hemaExtraConfirm", this.relative_path);
      this.close();
    },
    afterRead(e) {
      if (!e) {
        return;
      }
      let fd = new FormData();
      fd.append("file", e.file);
      axios
        .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
          headers: {
            "Contnent-Type": "multipart/form-data"
          }
        })
        .then(res => {
          if (res.data.result == 1) {
            this.pic = res.data.data.img_url;
            this.relative_path = res.data.data.img;
            this.$toast(res.data.msg);
          } else {
            this.logo.message = "failed";
            this.$toast(res.data.msg);
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.cell_l {
  display: flex;
  justify-content: flex-start;
}
.c_l {
  text-align: left;
}
.uplpadBox {
  width: 15rem;
  height: 9rem;
  border-radius: 0.6rem;
  border: 1px dashed #969799;
  display: flex;
  justify-content: center;
  align-items: center;
  .uplpadBox_img {
    width: 100%;
    height: 100%;
    border-radius: 0.6rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.6rem;
    }
  }
  .icon-icon_add {
    font-size: 1.5rem;
    color: #969799;
  }
}
</style>
